import React, { useCallback } from 'react'
import List from '@/components/list/List'
import useLoadData from '@/hooks/useLoadData'

import { HotStarWrapper, HotShowH1 } from './styledHome'

export default function HotStar() {
  const data = useLoadData('/hotstar')

  const renderItem = useCallback(
    item => {
      return (
        <div className="item">
          <img src={item.img} alt="" />
          <HotShowH1>{item.name}</HotShowH1>
        </div>
      )
    },
    [],
  )

  return (
    <HotStarWrapper>
      <List
        title="热门艺人"
        data={data}
        renderItem={renderItem}
      ></List>
    </HotStarWrapper>
  )
}
